import React from 'react'
import {connect} from 'dva'
import {Link, browserHistory} from 'dva/router'
import {Table, Row, Col, Form, Input, Select, Button, Switch, Modal, Popconfirm, message} from 'antd';
import RightContacts from "../../../utils/RightConstants";
import RightBox from "../../../components/commons/RightBox";
const FormItem = Form.Item;
const Option = Select.Option;

const TenantBankAccount = ({routes, params, children, location, dispatch, tenantBankAccount}) => {
    const {list, editModel} = tenantBankAccount;

    const columns = [{
        title: '租户名称',
        dataIndex: 'tenantName',
        key: 'tenantName',
    },{
        title: '开户银行',
        dataIndex: 'openBank',
        key: 'openBank',
    },{
        title: '账户币种',
        dataIndex: 'currency',
        key: 'currency',
    }, {
        title: '开户账号',
        dataIndex: 'bankAccount',
        key: 'bankAccount',
    }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
    }, {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
    }, {
        title: '创建人',
        dataIndex: 'creator',
        key: 'creator',
    }, {
        title: '操作',
        render(record) {
            let editTenantButton=<RightBox resource={RightContacts.BASEDATA.BASE_ACCOUNT_EDIT}>
                <a href="#" onClick={
                    () => {
                        dispatch({
                            type: 'tenantBankAccount/setEditModel',
                            payload: {
                                showStatus: true,
                                confirmLoading: false
                            }
                        })
                    }
                }>编辑</a>
                <span className="ant-divider"/>
            </RightBox>;
                
            let deleteTenantButton=<RightBox resource={RIGHT.BASEDATA.BASE_ACCOUNT_DELETE}>

                <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={()=>{}} okText="是" cancelText="否">
                    <a href="#">删除</a>
                </Popconfirm>
            </RightBox>;
            return (
                <span>
                    {editTenantButton}
                    {deleteTenantButton}
                </span>
            );
        }
    }];

    const handleAdd = function () {
        dispatch({
            type: 'tenantBankAccount/setEditModel',
            payload: {
                showStatus: true,
                title: '创建租户账号'
            }
        });
    }

    return (
        <div>
            <EditTenantBankAccount visible={editModel.showStatus} title={editModel.title} confirmLoading={editModel.confirmLoading} dispatch={dispatch}/>

            <Form layout="inline" style={{marginBottom: 15}}>
                <FormItem label={'开户银行'}>
                    <Input style={{width: 200}}/>
                </FormItem>
                <FormItem label={'开户账号'}>
                    <Input style={{width: 200}}/>
                </FormItem>

                <Button type="primary" icon="search" style={{marginRight: 5}}>查询</Button>
                <RightBox resource={RightContacts.BASEDATA.BASE_ACCOUNT_ADD}><Button icon="plus" onClick={handleAdd}>添加租户账号</Button></RightBox>
            </Form>
            <Table rowKey="id" dataSource={list} columns={columns} bordered={true} size={'middle'}/>
        </div>
    );
}

const EditTenantBankAccount = ({visible, title, dispatch, confirmLoading}) => {

    const formItemLayout = {
        labelCol: {
            xs: {span: 24},
            sm: {span: 6},
        },
        wrapperCol: {
            xs: {span: 24},
            sm: {span: 14},
        },
    };

    const WrappedForm = Form.create()(({form}) => {
        const {getFieldDecorator} = form;
        return (
            <Form>
                <FormItem
                    {...formItemLayout}
                    label="租户名称"
                    hasFeedback
                >
                    {getFieldDecorator('tenantName', {
                    })(
                        <span>广州市丑寅电子商务有限责任公司</span>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="开户银行"
                    hasFeedback
                >
                    {getFieldDecorator('openBank', {
                        rules: [{
                            required: true, message: '请输入开户银行！',
                        }],
                        initialValue: '中行广州江南大道支行'
                    })(
                        <Input />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="账户币种"
                    hasFeedback
                >
                    {getFieldDecorator('currency', {
                        rules: [{
                            required: true, message: '请输入账户币种！',
                        }],
                        initialValue: '人民币'
                    })(
                        <Input />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="开户账号"
                    hasFeedback
                >
                    {getFieldDecorator('bankAccount', {
                        rules: [{
                            required: true, message: '请输入租户开户账号',
                        }],
                        initialValue: '622131231'
                    })(
                        <Input />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="状态"
                    hasFeedback
                >
                    {getFieldDecorator('status', {
                        rules: [{
                            required: true, message: '请选择状态',
                        }],
                        initialValue: 'ENABLE'
                    })(
                        <Select>
                            <Option value="ENABLE">可用</Option>
                            <Option value="DISABLE">不可用</Option>
                        </Select>
                    )}
                </FormItem>

            </Form>
        );
    });

    return (
        <Modal visible={visible} title={title} confirmLoading={confirmLoading} onCancel={
            () => {
                dispatch({
                    type: 'tenantBankAccount/setEditModel',
                    payload: {
                        showStatus: false
                    }
                });
            }
        } onOk={
            () => {
                dispatch({
                    type: 'tenantBankAccount/setEditModel',
                    payload: {
                        confirmLoading: true
                    }
                });
            }
        }>
            <WrappedForm/>
        </Modal>
    );
}

export default connect(({tenantBankAccount}) => ({tenantBankAccount}))(TenantBankAccount)
